<template>
  <div class="container">
    <Header></Header>
    <div class="content">
      <div class="banner">
        <img src="./images/banner_home.png" alt="">
      </div>
      <div class="slogen">
        <img src="./images/slogen.png" alt="">
      </div>
      <!-- 活动类目 -->
      <div class="active">
        <img src="./images/home_title.png" alt="">
        <div class="category">
          <div class="categoryItem" @click="goTo('https://mp.weixin.qq.com/s/IzouzdO6zjpWF09-x6Ds5A')">
            <div>
              <img src="./images/arrow_up.png" alt="">
            </div>
            <div class="categoryText">书画活动</div>
            <div>
              <img src="./images/arrow_down.png" alt="">
            </div>
          </div>
          <div class="categoryItem" @click="goTo('https://mp.weixin.qq.com/s/ytd9hlBTKQ_HuujlA3DjSA')">
            <div>
              <img src="./images/arrow_up.png" alt="">
            </div>
            <div class="categoryText">朗诵活动</div>
            <div>
              <img src="./images/arrow_down.png" alt="">
            </div>
          </div>
          <div class="categoryItem" @click="goTo('https://mp.weixin.qq.com/s/Sa5J6V2dQ-plpy1PhUiU0w')">
            <div>
              <img src="./images/arrow_up.png" alt="">
            </div>
            <div class="categoryText">征文活动</div>
            <div>
              <img src="./images/arrow_down.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <!-- 描述 -->
      <div class="description">
        <img src="./images/home_title2.png" alt="韶華杯青少年美育系列活动标题">
        <div class="descriptionText">
          &emsp;&emsp;韶華杯青少年美育系列活动是由韶華杯青少年美育系列活动组委会主办，由北京文学期刊中心《东方少年》杂志出版指导，
          由中华儿童文化艺术促进会素质人才教育工作委员会和华夏文化促进会青少年艺术工作委员会为活动支持单位，由北京央美美育艺术发展中心承办，
          面向全国广大青少年以及艺术爱好者展开的专业级全国性质的社会实践艺术活动，该活动通过弘扬爱国主义精神，践行并激励广大青少年通过创作书法、绘画、手工、摄影、征文、写作、诗歌、朗诵等美育作品，
          弘扬中华优秀传统文化，发扬爱国主义精神，加强青少年交流学习，促进华夏文化的传承与发展，在参与社会实践的同时推动全民美育素质提高，引导青少年感受华夏文化内涵精神，以自己的独特的视角，
          通过书法、绘画、手工、摄影、征文、写作、诗歌、朗诵等形式来表达自己对于童年和青春的理解和传承，激发青少年爱国主义精神，为祖国的繁荣昌盛贡献自己的力量。
        </div>
      </div>
      <div class="footer">
        <Footer></Footer>
      </div>
    </div>
  </div>
</template>

<script>
import Footer from '@/components/Footer/Footer.vue';
import Header from '../../components/Header/Header.vue'

export default {
  name: 'home',
  components: {
    Header, Footer
  },
  methods: {
    goTo(url) {
      window.open(url, '_blank');
    }
  }
}
</script>

<style scoped>
.content {
  width: 100%;
  height: 150vw;
  background-size: 100% 100%;
  background-image: url('./images/background.png');
}

.banner {
  width: 100%;
  height: 40vw;
  border-radius: 0 0 20vw 20vw;
  overflow: hidden;
  border-bottom: 10px solid #C1272D;
  box-shadow: 0 4px 20px rgba(255, 255, 0, 0.6);
  /* 添加黄色阴影 */
}

.banner img {
  width: 100%;
  margin-top: -5vw;
  transition: transform 1s ease;
}

.banner img:hover {
  cursor: pointer;
  transform: scale(1.1);
}

.slogen {
  width: 100%;
  text-align: center;
  margin: 8vw 0;
}

.slogen img {
  width: 40%;
}

.active {
  width: 100%;
  margin-top: 15vw;
  text-align: center;
}

.active>img {
  width: 10vw;
}

.category {
  width: 100%;
  height: 20vw;
  margin-top: 5vw;
  background-size: 100% 100%;
  background-image: url('./images/blackground_category.png');
  display: flex;
  justify-content: center;
  align-items: center;
}

.categoryItem {
  width: 13vw;
  height: 20vw;
  border: 2px solid #FFF;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  transition: transform 0.3s ease;
}

.categoryText {
  min-height: 105px;
  writing-mode: vertical-lr;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: #916C2B;
}

.category .categoryItem:first-child {
  border-left: 4px solid #FFF;
}

.category .categoryItem:last-child {
  border-right: 4px solid #FFF;
}

.categoryItem:hover {
  cursor: pointer;
  transform: translateY(-10px);
  background-color: #F2EEE5;
  border: 4px solid rgb(243, 198, 113) !important;
}

.description {
  width: 100%;
  margin-top: 8vw;
  text-align: center;
}

.descriptionText {
  width: 75%;
  margin: 0 auto;
  margin-top: 5vw;
  text-align: left;
  letter-spacing: 8px;
  font-size: 26px;
  line-height: 65px;
}

.footer {
  width: 100%;
  height: 10vw;
  margin-top: 5vw;
}

/* 小屏幕/手机 */
@media screen and (max-width: 960px) {
  .content {
    background-image: url('./images/background_phone.png');
  }

  .banner {
    box-shadow: 0 2px 5px rgba(255, 255, 0, 0.6);
    /* 添加黄色阴影 */
  }

  .slogen img {
    width: 60%;
  }

  .active {
    margin-top: 10vw;
  }

  .active>img {
    width: 18vw;
  }

  .category {
    height: 35vw;
    background-image: url('./images/blackground_category_phone.png');
  }

  .categoryItem {
    width: 20vw;
    height: 35vw;
  }

  .categoryText {
    font-size: 12px;
  }

  .categoryItem>div img {
    width: 4vw;
  }

  .categoryItem:hover {
    transform: translateY(-5px);
  }

  .description {
    background-size: 100% 100%;
    background-image: url('./images/description_phone.png');
  }

  .description img {
    width: 50vw;
  }

  .descriptionText {
    width: 85%;
    font-size: 12px;
    letter-spacing: 3px;
    line-height: 25px;
  }

  .footer {
    height: 25vw;
    margin-top: 5vw;
  }
}
</style>